<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3><slot></slot>条评论</h3>
      </div>
      <div v-for="(item, index) in comment" :key="item.id" class="text item">
        <el-row>
          <el-col :span="2">
            <div class="CommentImg">
              <el-avatar
                :src="item.userVo.avatar"
                :size="40"
              ></el-avatar>
            </div>
          </el-col>
          <el-col :span="22">
            <h4 style="display: inline">{{ item.userVo.username}}</h4>
            <span>&nbsp; {{ index + 1 }}楼</span>

            <div class="commentContent">
              <span >{{ item.content }}</span>

              <span  class="time">{{item.commentDate}}</span>
              <el-link
                :underline="false"
                style="float: right; margin-right: 10px" @click="writeComment(item.id)"
                >评论</el-link
              >
              
            </div>
          </el-col>
          <el-col :span="24">

            
            <div class="Reply">
                <el-link
                :underline="false"
                style=" margin-left: 10px"
                icon="el-icon-view"

                >所有评论</el-link
              >

                <TwoComment :children="item.children"></TwoComment>

            </div>


          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {writeComment} from '@/api/comment'
import {getToken} from '@/request/token'
import {getUserInfo} from '@/api/user'
import TwoComment from "./twoComment.vue"
import {findCommentByArticleId} from '@/api/comment'
export default {
  created(){
    findCommentByArticleId(this.$route.query.id).then(res=>{
      this.comment=res.data
      console.log(this.comment);
    })
    
  },
  data() {
    return {
      comment:[],
      commentParams:{
        userId:'',
        articleId:'',
        content:'',
        parentId:''
      }

    };
  },
  components: {
    TwoComment
  },
  methods:{
    writeComment(parentId){
      this.$prompt('请输入内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: !/^\s*$/g,
          // inputErrorMessage: '内容不能为空'
        }).then(({ value }) => {
          if(value===''||value===null){
            return this.$message({
            type: 'error',
            message: '内容不能为空'
          })
          }

          const token=getToken();
     
     if(token!=null){
     getUserInfo(token).then(res=>{
       if(!res.success){
         return this.$notify({
           title: '提示',
           message: '非法评论',
           type: 'error'
         });
       }else{
         this.commentParams.articleId=this.$route.query.id
          this.commentParams.userId=res.data.id
          this.commentParams.content=value
          this.commentParams.parentId=parentId
          writeComment(this.commentParams).then(res=>{
           if(res.success){
            
            findCommentByArticleId(this.$route.query.id).then(data=>{
            this.comment=data.data
           
      
    })
             return this.$message.success('评论成功');
           }
           return this.$message.error('非法评论');
          })
       
       }
       
     })
   }else{
     return this.$notify({
           title: '提示',
           message: '您还未登录',
           type: 'error'
         });
   }

          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    }
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  line-height: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.CommentImg {
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}
h4 {
  position: relative;
  margin-block-start: 0;
  margin-block-end: 0;
  /* margin-top: 10px; */
  line-height: 20px;

  /* display: inline; */
}
.el-row {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.commentContent {
  font-size: 15px;
  font-weight: bold;
}
.Reply {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 10px;
}
.time {
  float: right;
   margin-right: 10px;
   font-size: 10px;
   font-weight: bold;
   color: #C0C4CC;


}
</style>